<template>
    <div class="discover">
        <!-- 二级导航 -->
        <SubNav @changeTab="changeTab" />
        <!-- 切换显示的内容 -->
        <Suspense>
            <template #default>
                <transition name="fade">
                    <KeepAlive>
                        <component :is="AsyncSubComponent" />
                    </KeepAlive>
                </transition>
            </template>
            <template #fallback>
                <div class="loading">加载中...</div>
            </template>
        </Suspense>
    </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, computed } from 'vue'
import SubNav from '../components/SubNav.vue'

const currentTab = ref('recommend')
const componentsMap: Record<string, any> = {
    recommend: defineAsyncComponent(() => import('./Recommend.vue')),
    rankinglist: defineAsyncComponent(() => import('./RankingList.vue')),
    songlist: defineAsyncComponent(() => import('./SongList.vue')),
    blog: defineAsyncComponent(() => import('./Blog.vue')),
    singer: defineAsyncComponent(() => import('./Singer.vue')),
    newdiscpublish: defineAsyncComponent(() => import('./NewDiscPublish.vue'))
}

const AsyncSubComponent = computed(() => componentsMap[currentTab.value])

const changeTab = (tab: string) => {
    currentTab.value = tab
}
</script>

<style lang="scss" scoped></style>